import {LikeOutlined, MessageFilled, StarTwoTone} from '@ant-design/icons';
import {List, Tag} from 'antd';
import React from 'react';
import {Link} from 'umi';
import ChapterListContent from '../ChapterListContent';
import styles from './index.less';
import InfiniteScroll from "react-infinite-scroller";
import {typeUrl} from "@/utils/utils";

const Chapters = (props) => { // isBook=product表示是作品列表，否则是章节列表，如果为空是独立文章作品列表
  const {list = [], loading, fetchMore, pageSize, total, cur, star, isBook} = props;

  const IconText = ({icon, text, params}) => (
    <span>
      <a onClick={() => star(params)}>{icon}</a> {text}
    </span>
  );

  const enumTags = (tags = []) => {
    const temp = [];
    for (let i = 0, len = tags.length; i < len; i += 1) {
      const tag = tags[i];
      if (tag)
        temp.push((<Tag key={`${tag.id}-${i}`}><Link
          to={`/archives/tag/${tag.slug}`} target="_blank" rel="noopener">{tag.name}</Link></Tag>));
    }
    return temp;
  };
  return (
    <InfiniteScroll
      initialLoad={false}
      pageStart={0}
      loadMore={() => fetchMore(cur+1)}
      hasMore={(total > (cur - 1) * pageSize)}
    >
      <List
        size="large"
        className={styles.articleList}
        loading={loading}
        itemLayout="vertical"
        dataSource={list}
        renderItem={(item, i) => !isBook ? (
            <List.Item
              key={`${item.id}-${i}`}
              actions={[
                <IconText key="star" icon={<StarTwoTone/>} text={item.starCount}
                          params={{path: '/cms/star', id: item.id}}/>,
                <IconText key="like" icon={<LikeOutlined/>} text={item.likeCount}
                          params={{path: '/cms/like', id: item.id}}/>,
                <IconText key="message" icon={<MessageFilled/>} text={item.commentCount}/>,
              ]}
              extra={
                <Link to={typeUrl(item)} rel="nofollow " target="_blank"><img width={160} alt="cover" src={item.cover} /></Link>
              }
            >
              <List.Item.Meta
                title={
                  <Link className={styles.listItemMetaTitle} // 此处需要根据发布类型解耦类型模板，暂定信息、产品和存档三种模板
                        /* eslint-disable-next-line no-nested-ternary */
                        to={typeUrl(item)}
                  target="_blank" rel="noopener">
                    {item.pubTitle}
                  </Link>
                }
                description={
                  <span>
                  {item.tags && enumTags(item.tags)}
                  </span>
                }
              />
              {item && <ChapterListContent data={item} />}
            </List.Item>
          ) :
          (
            <List.Item
              key={`${item.id}-${i}`}
            >
              {
                isBook === 'product' ?
                  (<>
                    <List.Item.Meta
                      title={
                        <Link className={styles.listItemMetaTitle} to={`/product-${item.id}.html`} target="_blank" rel="noopener">
                          {item.pubTitle}
                        </Link>
                      }
                  />
                  {item && <ChapterListContent data={item}  isBook={isBook}/>}
                    </>
                  )
                  : (
                    <Link className={styles.listItemMetaTitle} to={`/archives-${item.id}.html`} target="_blank" rel="noopener">
                      {`${total - i} ${item.pubTitle}`}
                    </Link>
                  )
              }
            </List.Item>
          )
        }
      />
    </InfiniteScroll>
  );
};

export default Chapters;
